<template>
  <div v-if="userPage != null">
    <el-form :inline="true" size="small">
      <el-form-item label="用户名称">
        <el-input
          placeholder="请输入用户名称"
          prefix-icon="Search"
          v-model="userName"
          class="input-with-select"
          width="120px"
        ></el-input>
      </el-form-item>
      <el-form-item label="用户类型">
        <el-select v-model="userTypeId" placeholder="请选择用户类型">
          <el-option label="所有" value=""></el-option>
          <el-option
            v-for="userType in userTypeList"
            :key="userType.id"
            :label="userType.type"
            :value="userType.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="find" :icon="Search">查询</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="userData" stripe style="width: 100%" size="small" border>
      <el-table-column prop="id" label="id" width="90"></el-table-column>
      <el-table-column
        prop="name"
        label="用户姓名"
        width="90"
        :sortable="true"
      ></el-table-column>
      <el-table-column
        prop="sex"
        label="性别"
        width="90"
        :sortable="true"
      ></el-table-column>
      <el-table-column
        prop="account"
        label="用户账号"
        width="190"
        :sortable="true"
      ></el-table-column>
      <el-table-column
        prop="institute"
        label="学院"
        width="100"
        :sortable="true"
      ></el-table-column>
      <el-table-column
        prop="createTime"
        label="用户创建时间"
        width="180"
        :sortable="true"
      ></el-table-column>
      <el-table-column fixed="right" label="操作" width="270">
        <template #default="scope">
          <el-button
            type="primary"
            :icon="Edit"
            @click="editPage(scope.row)"
            size="small"
            >编辑</el-button
          >
          <el-button type="success" :icon="Plus" @click="addPage" size="small"
            >添加</el-button
          >
          <el-button
            type="danger"
            :icon="Delete"
            @click="deleteUser(scope.row)"
            size="small"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      class="page"
      background
      layout="total, sizes, prev, pager, next"
      v-model:current-page="currentPage"
      :total="userPage.total"
      @current-change="refreshuserPage"
      :page-size="userPage.pageSize"
    ></el-pagination>
  </div>
</template>

<script setup>
import { ref, onMounted, watch } from "vue";
import { useRouter, useRoute } from "vue-router";
import { ElMessage, ElMessageBox } from "element-plus";
import { Search, Edit, Plus, Delete } from "@element-plus/icons-vue";
import axios from "axios";

const OK = 200;
const router = useRouter();
const route = useRoute();

const userPage = ref(null);
const userData = ref([]);
const currentPage = ref(1);
const userName = ref("");
const userTypeId = ref("");
const userTypeList = ref([]);

const getUserPage = async (pageNum, pageSize) => {
  try {
    const typeId = route.query.userTypeId;
    const res = await axios.get("/api/users", {
      params: {
        pageNum,
        pageSize,
        userName: userName.value,
        userTypeId: userTypeId.value,
      },
    });
    if (res.data.code === OK) {
      userPage.value = res.data.data;
      userData.value = userPage.value.list;
    } else {
      ElMessage.error(res.data.data);
    }
  } catch (error) {
    console.error(error);
    ElMessage.error("获取用户列表失败");
  }
};

const getUserTypeList = async () => {
  try {
    const res = await axios.get("/api/userTypes");
    if (res.data.code === OK) {
      userTypeList.value = res.data.data;
    } else {
      ElMessage.error(res.data.data);
    }
  } catch (error) {
    console.error(error);
    ElMessage.error("获取用户类型列表失败");
  }
};

const editPage = (row) => {
  router.push({ name: "EditUser", query: { id: row.id } });
};

const addPage = () => {
  router.push({ name: "AddUser" });
};

const deleteDao = async (id) => {
  try {
    const res = await axios.delete("/api/users/" + id);
    if (res.data.code === OK) {
      userPage.value = res.data.data;
      userData.value = res.data.data.list;
    } else {
      ElMessage.error(res.data.data);
    }
  } catch (error) {
    console.error(error);
    ElMessage.error("删除用户失败");
  }
};

const deleteUser = (row) => {
  ElMessageBox.confirm("此操作将永久删除该用户, 是否继续?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      deleteDao(row.id);
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "已取消删除",
      });
    });
};

const refreshuserPage = () => {
  getUserPage(currentPage.value, 8);
};

const find = () => {
  getUserPage(currentPage.value, 8);
};

onMounted(() => {
  getUserPage(1, 8);
  getUserTypeList();
});

watch(
  () => route.query,
  () => {
    getUserPage(currentPage.value, 8);
  }
);
</script>

<style scoped>
@import "../../css/common.css";
</style>
